<template>
  <div style="width: 1200px;margin: 0 auto;height: 100%;margin-top: 20px">
    <el-row :gutter="20">
      <el-col :span="18">

        <!--    工作分栏开始  -->
        <div class="bgcolor_div">
          <a class="card_dia" href="javascript:void(0)">
            <div style="margin-top: 10px;position: relative" v-for="item in pagedata">
              <el-card shadow="hover">

                <!--  标题   -->
                <div style="display: flex">
                <span style="display: block;background-color: red;color: white;
                width: 30px;height: 18px;font-size: 10px;margin-right: 10px">加速中</span>
                  <h3 style="position: relative;top: -5px">
                    <span v-for="ktem in item.list" style="margin-right: 5px">
                      {{ ktem.jobName }}
                    </span>
                    | {{ item.cityName }}</h3>
                  <h2 style="color: #0092FF;position: absolute;top: 20px;left: 700px">
                    {{ item.salary + item.settle }}</h2>
                </div>

                <!-- 简介 -->
                <div style="text-align: left">
                  <p style="width: 500px;font-size: 10px" class="title_a" v-html="item.content"></p>
                </div>
                <br>

                <!-- 位置和时间 logo 名字 实名  按钮-->
                <div style="display: flex;margin-top: 10px">
                  <div style="display: flex">
                    <p class="el-icon-delete-location" style="color: #666666;margin-right: 50px;font-size: 11px">
                      {{ item.classfiy }}</p>
                    <p style="font-size: 14px;color: #666666">{{ item.relseaseTime }}</p>
                  </div>
                  <div style="display: flex;position: absolute;top: 80px;left: 600px">
                    <img src="/images/cardLogo.jpg" width="30px" height="20px">
                    <p style="font-size: 14px;width: 50px;margin:0px 10px" class="title_a">{{ item.username }}</p>
                    <!--                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #42b983;font-size: 10px">实名</p>-->
                    <!--                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #0aa1ed;font-size: 10px">企业</p>-->


                    <el-button @click="inputReager(item.id)">立即联系</el-button>
                  </div>
                </div>

                <!-- 其他 -->
                <el-divider/>
                <div style="display: flex" class="card_button">
                  <p>{{ item.term }}</p>
                  <p>{{ item.number }}</p>
                </div>

              </el-card>
            </div>
          </a>
        </div>
        <!--    工作分栏结束  -->

        <!-- 分页开始 -->
        <div class="bgcolor_div" style="margin-top: 10px;background-color: white;padding: 5px 0px;margin-bottom: 20px">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="parseInt(pagedata.maxPage)">
          </el-pagination>
        </div>
        <!-- 分页结束 -->

        <!--  附近的工作开始    -->
        <h4 style="text-align: left;margin-bottom: 10px">附近的工作</h4>
        <div class="bgcolor_div" style="text-align: left;margin-bottom: 20px">
          <div style="display: flex;margin-top: 20px">
            <el-card shadow="hover" v-for="item in 2" style="width: 500px;margin-right: 30px">
              <a href="javascript:void(0)" style="text-decoration: none;color: #000000" @click="">
                <div>
                  <h5>干挂石材、电焊</h5>
                  <div style="display: flex;text-align: center;margin:10px 0px">
                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #42b983;font-size: 10px">
                      实名</p>
                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #0aa1ed;font-size: 10px">
                      企业</p>
                    <p style="width: 100px;background-color: #F5F6FA;padding: 2px 4px;font-size: 8px" class="title_a">
                      广东省深圳市福田区</p>
                  </div>
                  <el-divider/>
                  <div>
                    <span style="font-size: 12px;color: #666666">许先生</span>
                    <el-button style="float: right;margin-left: 10px;position: relative;top: -5px" size="mini">立即联系
                    </el-button>
                    <p style="float:right;font-size: 12px;position: relative;top: 4px;color: #666666">10-01 19:55</p>
                  </div>
                </div>
              </a>
            </el-card>
          </div>
        </div>
        <!--  附近的工作结束    -->

        <!--  菜单栏》》 附近城市、最新企业、招工大全 开始     -->
        <div class="bgcolor_div" style="text-align: left">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="附近城市" name="vicinityCity">
              <div style="overflow: hidden;" class="Vcity">
                <a href="javascript:void(0)"
                   class="title_a"
                   style=";margin:0px 95px 0px 0px;height: 50px;display: inline-block;box-sizing: border-box;text-decoration: none;color: #666666"
                   v-for="item in 18" @click="vicinity()">贵阳招聘</a>
              </div>
            </el-tab-pane>
            <el-tab-pane label="最新企业" name="newEnterprise">
              <div style="overflow: hidden;" class="newEnter">
                <a href="javascript:void(0)"
                   class="title_a"
                   style=";margin:0px 75px 0px 0px;height: 50px;
                 width: 100px;
                 display: inline-block;box-sizing: border-box;text-decoration: none;color: #666666"
                   v-for="item in 15" @click="newEnter()">贵州飞扬人企业管理有限公司</a>
              </div>
            </el-tab-pane>
            <el-tab-pane label="招工大全" name="recruits">
              <div style="overflow: hidden;" class="recruit">
                <a href="javascript:void(0)"
                   class="title_a"
                   style=";margin:0px 75px 0px 0px;
                 width: 100px;
                 height: 50px;display: inline-block;box-sizing: border-box;text-decoration: none;color: #666666"
                   v-for="item in 15" @click="recruit()">贵阳南明区临时工招聘</a>
              </div>
            </el-tab-pane>
          </el-tabs>

          <h3>栏目介绍</h3>
          <p style="font-size: 15px;color: #666666">贵阳招聘，每天更新万条招工信息，为贵阳附近工友打造安全快速的招工平台！</p>
        </div>
        <!--        菜单栏》》 附近城市、最新企业、招工大全 结束-->

        <!--         全国招工导航开始-->
        <div class="bgcolor_div" style="text-align: left;margin-bottom: 10px">
          <h3>全国招工导航</h3>
          <div style="display: flex;flex-wrap:wrap ;margin-top: 10px ">
            <a href="javascript:void(0)" style="
            background-color: #F5F6FA;
            margin-right:20px ;
            margin-bottom: 10px;
            text-decoration: none;
            color: #666666;
            padding: 3px;display: block" v-for="(item,i) in 26" :key="i" @click="nationRecruit(i)">A</a>
          </div>
          <div v-if="nationRecruits.length!=0">
            <div style=";display: flex;flex-wrap: wrap">
              <a href="javascript:void(0)" class="title_a" style="margin-right: 20px;
            display: block;width: 140px;margin-bottom: 10px;
            text-decoration: none;color: #666666;font-size: 14px" v-for="item in nationRecruits">{{ item.name }}</a>
            </div>
          </div>
          <!--        {{daohang.tab_a}}-->
        </div>
        <!--   全国招工导航结束   -->
      </el-col>
      <el-col :span="6">
        <!-- 登录注册 -->
        <div style="text-align: left;background-color: white;width: 100%">
          <div style="padding: 10px" v-if="user==null">
            <el-form :label-position="labelPosition" label-width="80px" :model="user">
              <h4 style="margin-bottom: 10px">快捷登录</h4>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
              <el-input v-model="user.password" show-password placeholder="请输入密码" style="margin: 10px 0px"></el-input>
              <el-button class="el-buttonAlter" type="primary">登录/注册</el-button>
            </el-form>
          </div>

        </div>

        <!-- 精选招工推荐 -->
        <h3 style="background-color: white;margin: 20px 0px;padding: 10px;text-align: left">精选招工推荐</h3>

        <!-- 卡片 -->
        <div>
          <div v-for="item in 1" style="text-align: left">
            <a href="javascript:void(0)" style="text-decoration: none" @click=""><!-- ? -->
              <el-card shadow="hover" style="width: 100%;margin-right: 30px;margin-bottom: 10px">
                <div>
                  <h5>干挂石材、电焊</h5>
                  <div style="display: flex;text-align: center;margin:10px 0px">
                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #42b983;font-size: 10px">
                      实名</p>
                    <p style="width: 30px;margin-right: 10px;height: 18px;border: 1px solid rgba(0,0,0,0.1);color: #0aa1ed;font-size: 10px">
                      企业</p>
                    <p style="width: 100px;background-color: #F5F6FA;padding: 2px 4px;font-size: 8px" class="title_a">
                      广东省深圳市福田区</p>
                  </div>
                  <el-divider/>
                  <div>
                    <span style="font-size: 12px;color: #666666">许先生</span>
                    <el-button style="float: right;margin-left: 10px;position: relative;top: -5px" size="mini">立即联系
                    </el-button>
                    <p style="float:right;font-size: 12px;position: relative;top: 4px;color: #666666">10-01 19:55</p>
                  </div>
                </div>
              </el-card>
            </a>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "LookWorkRecruitCardView",
  data() {
    return {
      activeName: 'vicinityCity',
      nationRecruits: [],
      visible: false,
      visible1: false,
      labelPosition: 'left',
      pagedata: {currentPage: '', maxPage: '', list: ''},
      user: {
        username: '',
        password: '',
      },
      phoneData: {},
    }
  },
  methods: {
    login() {
      let data = this.qs.stringify(this.user);
      //默认为同源策略  network 未实现跨域访问
      this.axios.post('http://localhost:37000/v1/users/login', data)
          .then((response) => {
            if (response.data.code == 20000) {
              this.user = response.data.data;
              let userlogin = JSON.stringify(this.user);
              localStorage.setItem("user", userlogin); //以JSON格式存到localStorage:类似于map
              this.$message.success("登录成功！");
              location.href = '/member'
            } else {
              this.$message.error(response.data.message);
            }
          })

    },
    handleClose() {
    },
    vicinity() {
      //招聘请求
    },
    newEnter() {
      //公司
    },
    recruit() {

    },
    handleClick() {
    },
    nationRecruit(i) {
      let vam = {name: "阿拉善右旗紧急招基桩工程大柱"}
      this.nationRecruits = []
      for (let i = 0; i < 10; i++) {
        this.nationRecruits.push(vam);
      }
    },
    inputReager(id) {
      this.user=JSON.parse(localStorage.getItem('user'));
      if (this.user==null){
        this.$message.error("您还未登录请先登录！")
        this.$router.push('/login');
        return;
      }
      let jwt=this.user.token;
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .get("http://localhost:29000/v1/jobs/la/" + id + "/gphone")
          .then((response) => {
            if (response.data.code == 20000) {
              this.phoneData = response.data.data;
              alert(this.phoneData.phone)
              this.visible = false;
            } else {
              this.$message.error(response.data.message);
            }
          })

    },

    lookworkRecuri(page) {
      this.axios.get("http://localhost:28000/v1/jobs/hiring?page=" + page)
          .then((response) => {
            if (response.data.code == 20000) {
              this.pagedata = response.data.data;
            }
          })
    }

  },
  mounted() {
    this.lookworkRecuri(1);
    this.user = JSON.parse(localStorage.getItem('user'));



  }
}
</script>

<style scoped>
/deep/ .el-input__inner {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.bgcolor_div {
  background-color: white;
  padding: 10px;
}

.card_button p {
  background-color: #F5F6FA;
  color: #666666;
  font-size: 13px;
  padding: 5px;
  margin-right: 10px;
  border-radius: 5px;
}

.card_dia {
  text-decoration: none;
}

/deep/ .el-divider {
  margin-top: 5px;
  margin-bottom: 10px;
}

.title_a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  /*!* 设置省略号相关样式 *!*/
  /*display: -webkit-box;*/
  /*-webkit-line-clamp: 1; !*  设置行数 *!*/
  /*-webkit-box-orient: vertical; !*纵向*!*/
}

/deep/ .el-buttonAlter {
  margin-top: 10px;
  height: 40px;
  width: 100% !important;

}

/deep/ .el-button {
  width: 100px;
  position: relative;
  top: -8px;
  border-radius: 4px;
}
</style>